<template>
  <div class="head">
    <div class="Blocks">诗经</div>
    <div class="title">
      {{shijing.chapter}}·{{shijing.section}}·{{shijing.title}}
      <div class="content" v-for="(item,index) in shijing.contentsplit" :key="index">
        {{item}}
        </div>
    </div>
    <div class="Blocks">宋词</div>
    <div class="title">
      {{poems.title}}
      <div class="author">作者：{{poems.authorname?poems.authorname:poems.author}}</div>
      <div class="content" v-for="(item,index) in poems.contentsplit" :key="index">
        {{item}}
        </div>
    </div>
  </div>
</template>

<script>
import { navto } from "@/utils/util";
import { getOneShijingByRound,getOnePoemsByRound } from "@/api/api";
export default {
  data() {
    return {
      getTokenByStorage: false, //是否获得了token
      shijing: {}, //随机获得一个诗经
      poems: {}, //随机获得一个宋词
    };
  },
  onLoad() {
    let that = this;
    this.reset();
    that.getOneShijing();
    that.getOnePomes();
    let token = mpvue.getStorageSync("token") || "";
    if (token) {
      that.getTokenByStorage = true;
    } else {
      that.getTokenByStorage = false;
    }
  },
  methods: {
    /**
     * 重置所有实体
     */
    reset() {
      console.log("reset");
      this.shijing = {};
    },
    /**
     * 获得token
     */
    getToken() {
      // 跳转回授权页面
      navto("/pages/authorization/main", "");
    },
    /**
     * 获得一首随机的诗经
     */
    getOneShijing() {
      getOneShijingByRound().then(res => {
        if (res.data && res.data.code == 0) {
          this.shijing = res.data.shijing;
          if (this.shijing.content) {
            this.shijing.contentsplit = this.shijing.content.split("|");
          }
        }
      });
    },
    /**
     * 获得一首随机的宋词
     */
    getOnePomes() {
      getOnePoemsByRound().then(res => {
        if (res.data && res.data.code == 0) {
          this.poems = res.data.poems;
          if (this.poems.content) {
            this.poems.contentsplit = this.poems.content.split("|");
          }
        }
      });
    }
  }
};
</script>

<style lang='less'>
.head {
  width: 90%;
  background-color: #fff;
  padding-top: 22rpx;
  margin: 0rpx auto;
  .Blocks {
    font-size: 32rpx;
    font-weight: 600;
    display: flex;
    padding-left: 22rpx;
    border-left: 8rpx solid rgb(173, 46, 46);
    color: rgb(173, 46, 46);
  }
  .title {
    margin-top: 18rpx;
    margin-bottom: 38rpx;
    padding: 18rpx 18rpx;
    background-color: rgb(237, 245, 244);
    text-align: center;
    font-size: 36rpx;
    font-weight: 500;
    border-radius: 25rpx;
    .author{
      margin: 18rpx auto;
      font-size: 24rpx;
      font-size: 400;
    }
    .content {
      margin: 12rpx 18rpx;
      padding: 12rpx 18rpx;
      font-size: 28rpx;
      font-size: 400;
    }
  }
}
</style>
